@charset "utf-8";

*{
  margin: 0;
  padding: 0;
  font-family: 微软雅黑;
}

html, body{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

ul{
  list-style: none;
}

@import "base/button";

$border-width:1;

@function calc_width($border-width){
  @return 100% - $border-width;
}

@mixin style-border($border-color: red){
  border: $border-width+px solid lighten($border-color, 20%);
  @content;
}

@mixin transition_func($type:ease-in){
  transition: all 1s $type;
  @if $type==ease-in{
    width: calc_width(1);
  }@else {
    width: calc_width(50);
  }
}
.main-box{
  margin-top: 10px;
  margin-left: .4%;
  @include style-border(green){
    border-radius: 5px;
  }
  @include transition_func(ease-out);
  height: 50px;
  &:hover{
    @include transition_func;
  }
}
@function getColor($num){
  @if $num=='1'{
    @return red;
  }@else if $num=='2'{
    @return blue;
  }@else {
    @return green;
  }
}

.style-ul{
  width: 200px;
  margin-top: 20px;
  @include style-border{
    border-radius: 5px;
  }
  li{
    width: 100%;
    height: 20px;
  }
  @for $i from 1 to 4{
    li:nth-of-type(#{$i}){
      background: getColor(#{$i});
    }
  }
}